<template>
  <header class="global-header">
    <div class="header-content">
      <!-- 左侧Logo和标题 -->
      <div class="logo-section">
        <img src="@/assets/logo.png" alt="Logo" class="logo" />
        <span class="site-title">AI代码生成器</span>
      </div>

      <!-- 中间导航菜单 -->
      <a-menu mode="horizontal" :items="menuItems" :selected-keys="[selectedKey]" class="main-menu"
        @click="handleMenuClick" />

      <!-- 右侧用户信息/登录按钮 -->
      <div class="user-section">
        <a-button type="primary" @click="handleLogin">登录</a-button>
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import type { MenuProps } from 'ant-design-vue'

// 定义属性
interface Props {
  menuItems?: MenuProps['items']
  selectedKey?: string
}

const props = withDefaults(defineProps<Props>(), {
  menuItems: () => [
    { key: 'home', label: '首页' },
    { key: 'features', label: '功能介绍' },
    { key: 'examples', label: '使用示例' },
    { key: 'about', label: '关于我们' }
  ],
  selectedKey: 'home'
})

const router = useRouter()

// 处理菜单点击事件
const handleMenuClick = (e: { key: string }) => {
  console.log('菜单点击:', e.key)
  // 这里可以根据需要进行路由跳转或其他操作
  router.push(`/${e.key}`)
}

// 处理登录按钮点击事件
const handleLogin = () => {
  console.log('点击登录按钮')
  // 这里可以跳转到登录页面或打开登录弹窗
  // router.push('/login')
}
</script>

<style scoped>
.global-header {
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
  transform: translateZ(0); /* 启用硬件加速，解决缩放时元素消失问题 */
  min-height: 64px; /* 确保最小高度 */
  will-change: transform; /* 提前告知浏览器该元素将要发生变化 */
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 100%; /* 允许根据内容伸缩 */
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  transform: translateZ(0); /* 启用硬件加速，解决缩放时元素消失问题 */
  will-change: transform; /* 提前告知浏览器该元素将要发生变化 */
}

.logo-section {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0; /* 防止在空间不足时收缩 */
}

.logo {
  height: 40px;
  width: 40px;
  object-fit: contain;
}

.site-title {
  font-size: 20px;
  font-weight: 600;
  color: #1890ff;
  white-space: nowrap; /* 防止标题换行 */
}

.main-menu {
  flex: 1;
  justify-content: center;
  margin: 0 40px;
  min-width: 0; /* 允许菜单收缩 */
  transform: translateZ(0); /* 启用硬件加速 */
  will-change: transform; /* 提前告知浏览器该元素将要发生变化 */
}

.user-section {
  display: flex;
  align-items: center;
  flex-shrink: 0; /* 防止在空间不足时收缩 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    padding: 0 16px;
    min-height: 64px; /* 确保最小高度 */
  }

  .site-title {
    font-size: 16px;
  }

  .main-menu {
    display: none;
  }
}
</style>
